<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        div {
            width: 50px;
            height: 50px;
            border: 1px solid #000; 
            margin: 10px;
        }
    </style>
</head>
<body>

    <div class="box box-1" id="demo1">1</div>
    <div class="box box-2" id="demo2">2</div>
    <div class="box box-2" id="demo3">3</div>


    <script>

        // 方法:
            // 通过标签名获取元素(伪数组)
            var divs = document.getElementsByTagName("div");
            console.log(divs);// 标签数组 HTMLCollection(3) [...]

            // 通过类名获取元素(伪数组)
            var boxs = document.getElementsByClassName("box");
            console.log(boxs);// 标签数组 HTMLCollection(3) [...]

            // 通过id名获取页面的元素(id是唯一的)
            // 页面id不能重复,重复了不符合web规范
            // console.log(demo1);//  <div class="box box-1" id="demo1">1</div>
            var demo_1 = document.getElementById("demo1");
            var demo_2 = document.getElementById("demo2");
            var demo_3 = document.getElementById("demo3");
            console.log(demo_1);// <div class="box box-1" id="demo1">1</div>
            console.log(demo_2);// <div class="box box-2" id="demo2">2</div>
            console.log(demo_3);// <div class="box box-2" id="demo3">3</div>


            // 以下方法可通过选择器获取元素
            // H5提供的方法(比较便捷)
            var ele_1 = document.querySelector(".box-1")
            console.log(ele_1);// 标签 <div class="box box-1" id="demo1">1</div>

            var ele_arr = document.querySelectorAll(".box-1");
            console.log(ele_arr);// 标签数组 NodeList [div#demo1.box.box-1]

    </script>
</body>
</html>